<template>
  <div class="comment_popup">
    <van-popup class="comment-post" v-model="showPostComment.condition" position="bottom">
      <van-field
        class="post-field"
        v-model="message"
        rows="2"
        autosize
        type="textarea"
        maxlength="50"
        placeholder="请输入留言"
        show-word-limit
      />
      <van-button round :disabled="message.length==0" class="post-btn" @click="addComment">发布</van-button>
    </van-popup>
  </div>
</template>

<script>
import { add_comment_reply_ajax } from "@/api/axios";
export default {
  name: "comment_popup",
  data() {
    return {
      message: "",
    };
  },
  model: {},
  props: {
    // 显示与关闭的状态
    showPostComment: {
      type: [Object],
      reduired: true,
    },
    articleId: {
      type: [String, Number, Object],
      required: true,
    },
    commentId: {
      type: [String, Number, Object],
      default: null,
    },
  },
  methods: {
    async addComment() {
      this.$toast.loading({
        message: "发布中...",
        forbidClick: true,
      });
      try {
        // 发送请求

        if (!this.target) {
          // 文章评论
          const { data: res } = await add_comment_reply_ajax({
            content: this.message,
            target: this.articleId,
          });
          // 回传修改本地数据
          this.$emit("articleComment_event", res.data.new_obj);
          console.log("wenzhang ");
        } else {
          // 回复评论
          const { data: res } = await add_comment_reply_ajax({
            target: this.commentId,
            content: this.message,
            art_id: this.articleId,
          });

          // 修改本地数据
          console.log("huifu");
        }

        // console.log(res,777);

        // // 关闭弹框
        this.showPostComment.condition = false;
        // // 提示
        this.$toast.success("评论成功");
      } catch (err) {
        console.log(err);
        this.$toast.fail("发布失败");
      }
    },
  },
  created() {},
};
</script>

<style lang='less' scoped>
.comment-post {
  padding: 10px 20px;
  .post-btn {
    width: 100%;
    border: 1px solid #000;
  }
}
</style>